<template>
    <div id="rainy" style="width: 400px;height: 300px;" v-if="store.isEchart">
        <img src="/src/assets/image/卡片-框/bg_box3.png" class="rainy-box">
        <v-chart :option="store.option_rainy"></v-chart>
    </div>
    <div id="temperature" style="width: 400px;height: 300px;" v-if="store.isEchart">
        <img src="/src/assets/image/卡片-框/k_1.png" class="temp-box">
        <v-chart :option="store.option_temp"></v-chart>
    </div>
    <div id="site" style="width: 400px;height: 300px;" v-if="store.isEchart">
        <img src="/src/assets/image/卡片-框/main_middle.png" class="site-box">
        <v-chart :option="store.site_option"></v-chart>
    </div>
    <div id="sun" style="width: 400px;height: 300px;" v-if="store.isEchart">
        <img src="/src/assets/image/卡片-框/bg_box3.png" class="sun-box">
        <v-chart :option="store.option_sun"></v-chart>
    </div>
    <div id="pm-item" style="width: 400px;height: 300px;" v-if="store.ispmItem">
        <img src="/src/assets/image/卡片-框/bg_box3.png" class="sun-box">
        <v-chart :option="store.pmItem_option"></v-chart>
    </div>
    <div id="pm-item_low" style="width: 400px;height: 300px;" v-if="store.ispmItem">
        <img src="/src/assets/image/卡片-框/bg_box3.png" class="site-box">
        <v-chart :option="store.pmItem_option_low"></v-chart>
    </div>

    <div id="rainy-item" style="width: 400px;height: 300px;" v-if="store.israinyItem">
        <img src="/src/assets/image/卡片-框/bg_box3.png" class="rainy-box">
        <v-chart :option="store.rainyItem_option"></v-chart>
    </div>
    <div id="temp-item" style="width: 400px;height: 300px;" v-if="store.istempItem">
        <img src="/src/assets/image/卡片-框/main_middle.png" class="site-box">
        <v-chart :option="store.tempItem_option"></v-chart>
    </div>
    <div id="temp-item_low" style="width: 400px;height: 300px;" v-if="store.istempItem">
        <img src="/src/assets/image/卡片-框/bg_box3.png" class="sun-box">
        <v-chart :option="store.tempItem_option_low"></v-chart>
    </div>

    <div id="sun-item" style="width: 400px;height: 300px;" v-if="store.issunItem">
        <img src="/src/assets/image/卡片-框/main_middle.png" class="site-box">
        <v-chart :option="store.sunItem_option"></v-chart>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { mapStore } from '@/stores/counter';
const store = mapStore()

</script>

<style scoped lang="scss">
#rainy,
#rainy-item {
    position: fixed;
    top: 60px;
    right: 30px;

    .rainy-box {
        position: absolute;
        right: 0px;
        top: -10px;
        width: 420px;
        height: 300px;
    }
}

#temperature {
    position: fixed;
    bottom: 0px;
    right: 50px;

    .temp-box {
        position: absolute;
        bottom: 50px;
        right: -20px;
        width: 420px;
        height: 280px;
    }
}

#site,
#temp-item,
#sun-item {
    position: fixed;
    top: 40px;
    left: 50px;

    .site-box {
        position: absolute;
        top: 15px;
        left: -10px;
        width: 440px;
        height: 300px;
    }
}

#sun {
    position: fixed;
    bottom: 50px;
    left: 60px;

    .sun-box {
        position: absolute;
        left: -20px;
        bottom: 30px;
        width: 440px;
        height: 260px;
    }
}

#pm-item,
#temp-item_low {
    position: fixed;
    bottom: 50px;
    left: 60px;

    .sun-box {
        position: absolute;
        left: -20px;
        bottom: 30px;
        width: 440px;
        height: 260px;
    }
}

#pm-item_low {
    position: fixed;
    top: 40px;
    left: 50px;

    .site-box {
        position: absolute;
        top: 15px;
        left: -10px;
        width: 440px;
        height: 300px;
    }
}
</style>
